<template>
  <div style="height: 100%;">
    <!-- PCA -->
    <div class="pca">
      <div class="m_title">
        <div class="divider"></div>
        <strong>整体评估</strong>
      </div>
      <div class="sub-title">
        <!-- 解释度：{{
          modelData.data && modelData.data.ev_chart
            ? `${
                (modelData.data.ev_chart[0][
                  modelData.data.ev_chart[0].length - 1
                ]*100).toFixed(2)
              }%`
            : '-'
        }} -->
        解释度：{{ explain_v }}
      </div>
      <a-row style="padding-bottom: 8px;">
        <a-col :span="12" style="text-align: left;">Explained Variance：</a-col>
        <a-col :span="12" style="text-align: right;">
          <a-tooltip
            placement="topRight"
            :overlay-style="{ width: '100%', align: 'right' }"
          >
            <template slot="title">
              <span>{{
                `${featureString}~k=${modelData.param && modelData.param.k}`
              }}</span>
            </template>
            <div class="feature">
              {{ `${featureString}~k=${modelData.param && modelData.param.k}` }}
            </div>
          </a-tooltip>
        </a-col>
      </a-row>
      <div class="graph">
        <Chart :chart-type="'lineChart'" :config="commonConfig" />
      </div>
      <div class="sub-title">PC Matrix：</div>
      <a-table
        :scroll="{ y: 300 }"
        :columns="PCA_columns"
        :data-source="PCA_data"
        bordered
        row-key="name"
        :pagination="false"
      ></a-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import Chart from '@/components/chart/chart.vue'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: { Chart },
})
export default class PCA extends Vue {
  public featureString: string | null = null

  public PCA_columns = [
    {
      title: 'name',
      key: 'name',
      dataIndex: 'name',
      slots: { title: 'customTitle' },
    },
  ]
  public PCA_data: any = []
  private chartData: any[] = []
  public explain_v: string | null = null

  public get modelData() {
    return DataViewStore.selectModel
  }

  public get commonConfig() {
    return {
      value: this.chartData,
      labelKey: 'k',
      valueKey: '成分方差贡献率',
      xAxisAttribute: 'k',
      yAxisAttribute: ['成分方差贡献率', '累积方差贡献率'],
      xAxisFontSize: 12,
      xAxisTitleIsShow: false,
      yAxisTitleIsShow: false,
      xAxisTitle: '降维维度',
      yAxisTitle: '成分方差贡献率',
      legendPosition: 'top',
    }
  }

  @Watch('modelData.data')
  public getModelData() {
    this.init()
    // console.log('watch', this.chartData)
  }

  public created() {
    this.init()
    // console.log('created', this.chartData)
  }

  public init() {
    const { data, param } = this.modelData
    this.PCA_columns = [
      {
        title: 'name',
        key: 'name',
        dataIndex: 'name',
        slots: { title: 'customTitle' },
      },
    ]
    this.explain_v = ''
    for (let i = 1; i <= Number(param.k); i += 1) {
      this.PCA_columns.push({
        title: `PC${i}`,
        key: i.toString(),
        dataIndex: `PC${i}`,
        slots: { title: 'customTitle' },
      })
      // console.log('ev_char',data)
      if (data.ev_chart) {
        this.explain_v += `PC${i}: ${(data.ev_chart[i - 1][1] * 100).toFixed(
          2
        )}% `
      }
    }

    this.featureString = data?.feature_list?.toString()
    this.chartData = []
    data?.ev_chart?.forEach((element: any, index: any) => {
      const item: any = {
        k: `PC${index + 1}`, // 字符型
        成分方差贡献率: element[1],
        累积方差贡献率: element[2],
        // 成分方差贡献率: (element[1] / 100).toFixed(2),
        // 累积方差贡献率: (element[2] / 100).toFixed(2),
      }
      this.chartData.push(item)
    })
    this.PCA_data = []
    data?.feature_list?.forEach((element: any, index: any) => {
      const object: any = {}
      object.name = element
      for (let i = 1; i <= Number(param.k); i += 1) {
        const pcIndex = Number(this.PCA_columns[i].key)
        object[this.PCA_columns[i].title] = data.pcMatrix[pcIndex - 1][index]
      }
      this.PCA_data.push(object)
    })
  }
}
</script>

<style lang="less" scoped>
.edge-svg {
  pointer-events: none;
  position: absolute;
}

.m_title {
  align-items: center;
  display: flex;
  margin-bottom: 22px;

  b {
    font-size: 16px;
  }
}

.divider {
  background-color: #6973ff;
  height: 18px;
  margin-right: 8px;
  width: 4px;
}

.pca {
  .sub-title {
    padding-bottom: 8px;
  }

  .feature {
    margin-left: 20vw;
    max-width: 30vw;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .graph {
    border: 1px solid #e8e8e8;
    height: 372px;
    margin-bottom: 16px;
    width: 100%;
  }
}
</style>
